<template>
    <section class="log-wrapper">
      <el-form :inline="true" :model="searchInfo" class="log-wrapper_search">
        <el-form-item label="操作人">
          <el-input v-model="searchInfo.username" placeholder="请输入操作人" @keyup.enter.native="onQuery"></el-input>
        </el-form-item>
        <el-form-item label="IP地址">
          <el-input v-model="searchInfo.ip" placeholder="请输入IP地址" @keyup.enter.native="onQuery"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onQuery">查询</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
     <nb-table
      :tableHeaders="tableHeaders"
      :tableData="tableData"
      :fixedOne="fixedOne"
      height="auto">
    </nb-table>
    <!-- 分页 -->
    <el-pagination
      align="right"
      style="padding-top: 20px;margin-bottom:100px;"
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageData.currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageData.pageSize"
      :total="pageData.total"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
</section>
</template>

<script>
import SeContent from '@/components/se-content.vue'
import SeForm from '@/components/se-form.vue'
import NbTable from '@/components/nb-table.vue'

const DEFAULT_DATA = {
  username: '',
  ip: ''
}

export default {
  components: {
    SeContent,
    SeForm,
    NbTable
  },
  data () {
    return {
      searchInfo: Object.assign({}, DEFAULT_DATA),
      pageData: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      tableHeaders: [
        {headerKey: 'username', headerName: '操作人用户名', fixed: true},
        {headerKey: 'realName', headerName: '真实姓名', width: '120'},
        {headerKey: 'operation', headerName: '操作详情'},
        {headerKey: 'method', headerName: '方法名称'},
        {headerKey: 'params', headerName: '输入参数'},
        {headerKey: 'ip', headerName: 'IP地址'},
        {headerKey: 'createDate', headerName: '操作时间', width: '160'}
      ],
      tableData: [],
      fixedOne: true
    }
  },
  created () {
    this.getLogsList()
  },
  methods: {
    async getLogsList (pa) {
      let param = Object.assign({}, this.searchInfo, {
        page: pa || this.pageData.currentPage,
        size: this.pageData.pageSize
      })
      let {data} = await this.$http.post(`/${this.$const.PREFIX.AUTHORITY}/operationlog/findOperationLogByConditons`, param)
      this.tableData = data.records
      this.pageData.total = data.total
      this.pageData.pageSize = data.size
      this.pageData.currentPage = data.current
    },
    onQuery () {
      this.searchInfo.username = this.searchInfo.username && this.searchInfo.username.trim()
      this.searchInfo.ip = this.searchInfo.ip && this.searchInfo.ip.trim()
      this.getLogsList(1)
    },
    onReset () {
      this.searchInfo = Object.assign({}, DEFAULT_DATA)
      this.getLogsList(1)
    },
    delQueryModel () {},
    sizeChangeHandle (val) {
      this.pageData.pageSize = val
      this.getLogsList()
    },
    currentChangeHandle (val) {
      this.pageData.currentPage = val
      this.getLogsList()
    }
  }
}
</script>
<style lang="scss">
.log-wrapper{
  &_search{
    background: white;
    padding: 20px 0 0 20px;
  }
}
.mtb15{
  margin: 15px 0;
}
</style>

